<template>
  <div>
    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      ref="actionRef"
      :row-key="(row) => row.id"
      @update:checked-row-keys="onCheckedRow"
      :actionColumn="actionColumn"
      :scroll-x="1090">
      <template #tableTitle>
        <n-form
          :model="formValue"
          label-placement="left"
          class="py-8"
          inline>
          <n-form-item label="省" path="province">
            <n-select v-model:value="formValue.provinceCode" remote
                      placeholder="省" :loading="provinceLoading" filterable clearable
                      :options="provinceList" style="width:200px;" @update:value="provinceChange"/>
          </n-form-item>
          <n-form-item label="市" path="city">
            <n-select v-model:value="formValue.cityCode" remote
                      placeholder="市" :loading="cityLoading" filterable clearable
                      :options="cityList" style="width:300px;"/>
          </n-form-item>
          <n-form-item label="医院名称" path="hosname">
            <n-input v-model:value="formValue.hosname" placeholder="医院名称" />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" @click="reloadTable">查询</n-button>
          </n-form-item>
        </n-form>
      </template>
    </BasicTable>

    <!-- 编辑框 -->
    <info ref="infoRef" :hospSetId="hospSetId"></info>
  </div>

</template>

<script lang="ts" setup>
import {getHospList, findByDictCode, findChildId, updaeHospStatus} from "@/api/yygh/hosp"
import { BasicTable, TableAction } from '@/components/Table';
import { columns} from './columns';

import { h, reactive, ref } from "vue";
import { useDialog, useMessage } from "naive-ui";
import { findDictChildData } from "@/api/yygh/dict";

const dialog = useDialog();

const message = useMessage();
const formValue = reactive({})

const provinceList = ref([]);

const cityList = ref([]);

// 异步加载
const provinceLoading = ref(true)
const cityLoading = ref(true)

const provinceChange = (val) => {
  console.log("provinceChange", val)
  formValue.cityCode = null
  findChildId(val).then((res)=> {
    let emptyArr = []
    for (let i = 0; i < res.data.length; i++) {
      let city =  res.data[i];
      emptyArr.push({label: city.name,value: city.id})

    }
    console.log("emptyArr", emptyArr)
    cityList.value = emptyArr
    cityLoading.value = false
  })
}
findByDictCode("Province").then((res)=> {
  let emptyArr = []
  for (let i = 0; i < res.data.length; i++) {
    let province =  res.data[i];
    emptyArr.push({label: province.name,value: province.id})

  }
  console.log("emptyArr", emptyArr)
  provinceList.value = emptyArr
  console.log("provinceList", provinceList.value)
    provinceLoading.value = false
})


findChildId("110000").then((res)=> {
  let emptyArr = []
  for (let i = 0; i < res.data.length; i++) {
    let city =  res.data[i];
    emptyArr.push({label: city.name,value: city.id})

  }
  console.log("emptyArr", emptyArr)
  cityList.value = emptyArr
  cityLoading.value = false
})

const pageObj = reactive({
  page: 1,
  limit: 10,
  total: 100
})
const actionRef = ref();
const hospSetId = ref(null) // 当前编辑的医院设置id

const batchCheckIds = ref([]) // 批量选中的id列表

const loadDataTable = async () => {
  let returnVal = await getHospList(pageObj.page, pageObj.limit, {...formValue}).then(res => res.data.content);
  console.log("returnVal", returnVal)
  return {data: returnVal};
};

const reloadTable =() => actionRef.value.reload();


function onCheckedRow(rowKeys) {
  console.log(rowKeys);
  rowKeys.forEach(r => batchCheckIds.value.push(r))
}

const actionColumn = reactive({
  width: 350,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: record.status? '下线' : '上线',
          type: record.status?'': 'warning',
          icon: 'ic:outline-delete-outline',
          onClick: ()=> {
            console.log("111", record)
            updaeHospStatus(record.id, record.status == 0 ? 1: 0).then(() => {
              reloadTable()
            })
          },
          // 根据业务控制是否显示 isShow 和 auth 是并且关系
          ifShow: () => {
            return true;
          },
          // 根据权限控制是否显示: 有权限，会显示，支持多个
          // auth: ['admin:hospset:delete'],
        },
        {
          label: '查看',
          onClick: getHospDetail.bind(null, record),
          ifShow: () => {
            return true;
          },
          // auth: ['admin:hospset:update'],
        },  {
          label: '排班',
          onClick: toSchedule.bind(null, record.hoscode),
          ifShow: () => {
            return true;
          },
          // auth: ['admin:hospset:update'],
        },
      ],

      select: (key) => {
        message.info(`您点击了，${key} 按钮`);
      },
    });
  },
});

import info from './info.vue'
const infoRef = ref(null);

// 查看医院详情
function getHospDetail(record) {
  console.log("getHospDetail", record)
  hospSetId.value = record.id;
  infoRef.value.openModal()
}

import {useRouter} from "vue-router";

const router = useRouter()
// toSchedule
function toSchedule(shopId) {
  console.log("toSchedule", shopId)

  router.push({path: "/hospSet/table/hosp/schedule", query: {shopId: shopId}})
}
</script>
